<template>
  <div class="logindetail">
    <div class="header">

      <span class="title">手机登录</span>
    </div>
    <div class="header-a"></div>
    <div class="face"><img :src="images4" class="images44"></div>
    <div class="phone">
      手机号
      <input type="text" maxlength="11" v-model="phone" @blur="inputBlur">
    </div>
    <div class="verification">
      验证码
      <input type="text" oninput="value=value.replace(/[^\d]/g,'').slice(0,6)" v-model="code" @blur="inputBlur">
      <span class="reacenum" @click="reacenum">获取验证码</span>
    </div>
    <div class="btn" @click="loginphone">登录</div>
    <div class="balank"></div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { Toast } from "mint-ui";
import * as api from "../../request/api.js";
import pic4  from "../../icons/iconsss.png"
export default {
  name: "logindetail",
  data() {
    return {
      images4:pic4,
      time: 0,
      phone: "",
      num: "",
      data: "",
      code: ""
    };
  },
  beforeCreate(){
    var height= document.documentElement.clientHeight; 
	window.onload = function(){ //在页面整体加载完毕时
        document.getElementsByClassName('logindetail').style.height= height + 'px'//把获取到的高度赋值给根div
      }
  },
  computed: {
    ...mapState(["users"])
  },
  methods: {
    ...mapMutations(["loginSuccess"]),
    reacenum() {
      var reg =
        11 &&
        /1(3[0-9]|4[0-9]|5[0-35-9]|6[0-9]|7[013456789]|8[0-9]|9[89])\\d{8}$/;
      if (this.phone == "" || this.phone == null) {
        Toast({
          message: "请输入电话号码"
        });
        // return false;
      } else if (!reg.test(this.phone)) {
        // return false;
        this.$http({
          method: "post",
          url: api.CODE,
          data: {
            userPhone: this.phone
          }
        }).then(resp => {
          Toast({
            message: resp.data.message
          });
          console.log("验证码", resp);
          console.log("手机号", this.phone);
        });
      } else {
        Toast({
          message: "请填写验证码"
        });

        this.time = 60;
        this.disabled = true;
        //重新验证码获取时间
        this.timer();
        //
        this.query();
      }
      console.log(this.phone);
    },
    loginphone() {
      this.$http({
        method: "post",
        url: api.LOIGN,
        data: {
          userPhone: this.phone,
          code: this.code
        }
      })
        .then(resp => {
          console.log(resp);
          if (resp.data.success == true) {
            // localStorage.setItem("mandata", JSON.stringify(resp.data.data));
            localStorage.setItem("token", JSON.stringify(resp.data.data.token));
            this.loginSuccess(resp.data.data);
            Toast({
              message: "登录成功"
            });
            this.$router.push({
              path: "/home"
            });
          } else {
            return false;
          }
          console.log(resp.data.data);
        })
        .catch(err => {
          Toast({
            message: err.msg
          });
        })
    },
     inputBlur () {
      // window.scroll(0, 0);
      setTimeout(() => {
        // alert(1);
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          return;
        }
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOS
          this.valRes = 'ios';
        } else if (/(Android)/i.test(navigator.userAgent)) { // 判断Android
          this.valRes = 'android';
        }
        if (this.valRes === 'ios') {
          document.activeElement.scrollIntoViewIfNeeded(true);
        }
      }, 10);
    },
  },
  watch: {
    users(val) {
      if (val.isLogin === true) {
        const { redirect = "/home" } = this.$route.params;
        this.$router.push(redirect);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../less/logindetail.less";
</style>
